<template>
	<div class="container">
		<v-historyToolBar @pickerDate="getPickerDate" @selectOpera="selectOpera" @intervalOpera="intervalOpera"
			@intervalOperaTwo="intervalOperaTwo" @searchTotal="getTableData" :tableData="tableData"
			:tableDataFields="tableDataFieldsFn">
		</v-historyToolBar>
		<el-table v-loading="loading" element-loading-text="拼命载入中" element-loading-spinner="el-icon-loading"
			:data="tableData" border stripe style="width: 100%">
			<el-table-column type="index" width="50" label="序号"> </el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" v-if="item.isShow" :width="item.width"
					:key="item.prop" align="center">
					<template v-slot="scope">
						<template v-if="item.format == 'STATUS'">
							<div v-if="scope.row[item.prop] == 'N'">
								<el-tooltip :disabled="false" content="系统与该设备无法连接" placement="top" effect="light">
									<i style="color: red; font-size: 20px" class="el-icon-sunrise"></i>
								</el-tooltip>
							</div>
							<div v-else-if="scope.row[item.prop] == null">
								<el-tooltip :disabled="false" content="系统与该设备正在连接" placement="top" effect="light">
									<i style="color: #ff8000; font-size: 20px" class="el-icon-warning"></i>
								</el-tooltip>
							</div>
							<div v-else-if="scope.row[item.prop] == 'Y'">
								<el-tooltip :disabled="false" content="系统与该设备正常连接" placement="top" effect="light">
									<i style="color: #00ff00; font-size: 20px" class="el-icon-circle-check"></i>
								</el-tooltip>
							</div>
							 
						</template>
						<template v-else-if="item.format == 'handleRow'">
							<el-button type="info" plain @click="viewServerUsage(scope.row)">详情</el-button>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<transition name="dialog">
			<el-dialog title="节点负载情况" :visible.sync="ServerUsageDialogVisible" :show-close="true"
				:close-on-click-modal="false" :close-on-press-escape="true" :fullscreen="true"
				v-if="ServerUsageDialogVisible">
				<div>
					<div style="margin-bottom: 15px">
						<el-radio-group v-model="viewBox" size="medium">
							<el-radio-button :label="vServerUsageLine">折线图</el-radio-button>
							<el-radio-button :label="vServerUseTable">表格</el-radio-button>

							<!-- <el-radio-button :label="vServerUsage">散点图</el-radio-button> -->
						</el-radio-group>
					</div>

					<div>
						<keep-alive>
							<component :is="viewBox" :propData="propData" :propIP="propIP">
							</component>
						</keep-alive>
					</div>
					<!-- <div class="closeButtin">
          <el-button
            size="medium"
            type="danger"
            plain
            circle
            icon="el-icon-close"
            @click="ServerUsageDialogClose"
          >
          </el-button>
        </div> -->
				</div>

				<!-- <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="ServerUsageDialogVisible = false">取 消</el-button>
      </span> -->
			</el-dialog>
		</transition>
	</div>
</template>

<script>
	import {
		getServerLoad
	} from "@/api/index.js";
	import vPagination from "common/Pagination.vue";
	import vHistoryToolBar from "./ToolBar.vue";
	import tableColumns from "./ServerTotal.js";
	import moment from "moment";
	import vServerUsage from "./ServerUsage.vue";
	import vServerUseTable from "./ServerUseTable.vue";
	import vServerUsageLine from "./ServerUsageLine.vue";
	export default {
		components: {
			vPagination,
			vHistoryToolBar,
			vServerUsage,
			vServerUsageLine,
			vServerUseTable,
		},
		data() {
			return {
				tableData: [],
				tableColumns: tableColumns,
				loading: false,
				postData: {
					fre: 0,
					StartTime: moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss"),
					EndTime: new Date(),
					type: "cpu",
					fre2: 100
				},
				ServerUsageDialogVisible: false,
				propData: "",
				propIP: "",
				vServerUsage,
				vServerUsageLine,
				vServerUseTable,
				viewBox: vServerUsageLine,
			};
		},
		created() {
			this.getTableData();
			console.log();
		},
		computed: {
			tableDataFieldsFn() {
				let _jsonfields = {};
				this.tableColumns.filter((item) => {
					if (item.label !== "操作" && item.label !== "monid") {
						_jsonfields[item.label] = item.prop;
					}
				});

				return _jsonfields;
			},
		},
		methods: {
			getTableData() {

				this.loading = true;
				let time = moment(this.postData.StartTime).format("YYYY-MM-DD HH:mm:ss");
				let time2 = moment(this.postData.EndTime).format("YYYY-MM-DD HH:mm:ss");
				getServerLoad({
					fre: this.postData.fre,
					time,
					time2,
					type: this.postData.type,
					fre2: this.postData.fre2,
				}).then((res) => {
					// this.dataTotal = res.dataTotal;
					this.tableData = res;

					this.loading = false;
				});
			},

			// 获取子组件选择的时间
			getPickerDate(pickerDate) {
				for (const key in pickerDate) {
					this.postData[key] = pickerDate[key];
				}

				// this.getTableData();
			},
			selectOpera(val) {
				this.postData.type = val.value;
				this.getTableData();
			},
			intervalOpera(val) {
				this.postData.fre = val;
				// this.getTableData()
			},
			intervalOperaTwo(val) {
				this.postData.fre2 = val;
			},

			viewServerUsage(val) {
				this.propIP = val.ip;
				this.propData = {
					time: moment(this.postData.StartTime).format("YYYY-MM-DD HH:mm:ss"),
					time2: moment(this.postData.EndTime).format("YYYY-MM-DD HH:mm:ss"),
					fre: this.postData.fre,
					type: this.postData.type,
					fre2: this.postData.fre2,
					monid: val.monid,
				};

				let propDataNotNull = true;
				for (const key in this.propData) {
					if (this.propData[key] || this.propData[key] == '0') {
						propDataNotNull = true;
					} else {
						propDataNotNull = false;
						break;
					}
				}
				if (propDataNotNull) {
					this.ServerUsageDialogVisible = true;
					setTimeout(() => {
						this.$message({
							showClose: true,
							message: "如需退出，请按ESC键",
							duration: 10000,
							type: "warning",
						});
					}, 1000);
				} else {
					this.$message.error("缺少参数，请稍后重试");
				}
				// this.ServerUsageDialogVisible = true;
				// this.$store.commit("historyDataServerUsage/setItem", {
				//     time: "2021-11-18 00:00:00",
				//     time2: "2021-11-22 00:00:00",
				//     fre: "1",
				//     ip: val.ip
				// });
				// console.log(this.$store.getters["historyDataServerUsage/getItem"])
				// let url = this.$router.resolve({
				//   path: "/ServerUsage",
				//   params:{
				//     time: "2021-11-18 00:00:00",
				//     time2: "2021-11-22 00:00:00",
				//     fre: "1",
				//     ip: "172.20.1.112"
				//   }
				// });
				// window.open(url.href);
				// this.$router.push({
				//           name: 'ServerUsage',
				//           params: {
				//               time: "2021-11-18 00:00:00",
				//     time2: "2021-11-22 00:00:00",
				//     fre: "1",
				//     ip: "172.20.1.112"
				//           }
				//       });
			},
			ServerUsageDialogClose() {
				this.viewBox = this.vServerUseTable;
				// this.$refs.ServerUsageDialog.$destroy()
				this.ServerUsageDialogVisible = false;
			},
		},
		watch: {},
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.spanInfo {
		padding-right: 10px !important;
	}

	.searchIP {
		padding-bottom: 10px;
	}

	.textLable>>>.el-button+.el-button {
		margin-left: 0px !important;
	}

	.IpButton {
		width: 100%;
		font-size: 14px;
	}

	.textLable .IpButton.selected {
		color: #fff;
		background-color: rgba(64, 158, 255);
	}

	.closeButtin {
		position: fixed;
		bottom: 3%;
		right: 49.5%;
	}

	.dialog-enter-active {
		animation: dialog 0.5s ease;
	}

	.dialog-leave-active {
		animation: dialog 0.5s ease reverse;
	}

	@keyframes dialog {
		from {
			transform: scale(0);
		}

		to {
			transform: scale(1);
		}
	}
</style>